<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app"></div>

<button id="btn">点击添加内容</button>

<!--
    通过表格渲染学生信息   id  studentName   age
-->
<table border="1" cellspacing="0" style="width: 70%">
    <thead>
        <tr>
            <th>ID</th>
            <th>学生姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody id="tb"></tbody>
</table>

<script src="../js/jquery-3.7.1.js"></script>
<script type="text/javascript">

    // 添加信息到div hello javascript
    $(function () {
        //  获取按钮节点对象
        $("#btn").on('click', function () {
            $("#app").html("<h1>hello javascript</h1>")
            // 设置文字的颜色
            $("#app").css('color', 'green')
        })
        // $("#app").text("<h1>hello javascript</h1>")
        let students = [
            {
                id: 1,
                name: 'tom1',
                age: 20
            },
            {
                id: 2,
                name: 'tom2',
                age: 20
            },
            {
                id: 3,
                name: 'tom3',
                age: 20
            }
        ]

        //  获取表格的tbody
          let  tb =  $("#tb")
        // 将数组中的数据动态渲染到 表格中
        students.forEach(student=>{
            //创建tr节点对象
            let  tr = $("<tr></tr>")
            // 遍历对象  将对象中的属性值添加到tr中
            for (let studentKey in student) {
               let td =  $("<td></td>").text(student[studentKey])
                tr.append(td)
            }
            // tr 添加到tbody
            tb.append(tr)
        })
    })

</script>
</body>
</html>